<template>
  <div>
    <roofVue title="登录"></roofVue>
    <div
      style="
        height: 20vh;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <img
        style="width: 5.2rem; height: 5.2rem"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F6a%2F67%2F94%2F6a6794c824b4e53320f6abe9da88980f.png&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641804380&t=97a735d80dda7890a68502eeece9e096"
        alt
      />
    </div>
    <van-form validate-first @submit="submit">
      <van-field
        label="用户名"
        name="validator"
        placeholder="请输入用户名"
        v-model="username"
        :rules="[{ validator, message: '请正确填写用户名' }]"
      />
      <van-field
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        v-model="password"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="danger" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div style="margin: 16px">
      <van-button type="primary" round block @click="$router.push('/zhuc')">注册</van-button>
    </div>
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    validator(val) {
      return /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
        val
      );
    },
    submit() {
      this.$post(this.url + "login", {
        userName: this.username,
        pwd: this.password,
      }).then((res) => {
        console.log(res);
        if (res.errorCode == "0") {
          this.$toast.success("登录成功");
          this.Sto.Session.set("user", res.data);
          this.$store.commit("setuser", res.data);
          this.$router.replace("/");
        } else {
          this.$toast.fail("登录失败");
          // console.log("春风得意马蹄疾，一日看尽长安花");
        }
      });
    },
  },
  components: {
    roofVue
  }
};
</script>

<style  scoped>
</style>